$font_family: PingFang SC,-apple-system,SF UI Text,Lucida Grande,STheiti,Microsoft YaHei,sans-serif;

// 首页样式
*{
    margin: 0;
    padding: 0;
    list-style: none;
    body{
        // overflow-x: hidden;
        #app{
            width: 375px;
            .logo_pic{
                width: 100%;
                display: flex;
                justify-content: center;
                img{
                    width: 157px;
                    padding: 9px 0 11px 0;
                }
            }
            .home_tabs{
                height: 44px;
                width: 100%;
                overflow-x: scroll;
                white-space: nowrap;
                // padding-left: 10px;
                background-color: #f6f6f6;
                display: flex;
                align-items: center;
                a{
                    text-decoration: none;
                    font-size: 14px;
                    color: #303133;
                    font-family: $font_family;
                    margin-right: 24px;
                    p{
                        padding-left: 10px;
                    }
                }
            }
            .home{
                margin: 0 auto;
                overflow: hidden;
                // 轮播图
                .home_swiper{
                    position: relative;
                    ul{
                        width: 1875px;
                        display: flex;
                        animation: run 7.5s linear infinite;
                        li{
                            width: 375px;
                            height: 155px;
                            a{
                                box-sizing: inherit;
                                .img{
                                    width: 100%;
                                    height: 100%;
                                    background-image: url(../img/swiper_1.png);
                                    background-size: cover;
                                    background-position: center center;
                                }
                            }
                        }
                        &:hover{
                            animation-play-state: paused;
                        }
                    }
                    @keyframes run {
                        0%{
                            transform: translateX(0);
                        }
                        10%{
                            transform: translateX(-375px);
                        }
                        25%{
                            transform: translateX(-375px);
                        }
                        35%{
                            transform: translateX(-750px);
                        }
                        50%{
                            transform: translateX(-750px);
                        }
                        60%{
                            transform: translateX(-1125px);
                        }
                        75%{
                            transform: translateX(-1125px);
                        }
                        85%{
                            transform: translateX(-1500px);
                        }
                        100%{
                            transform: translateX(-1500px);
                        }
                    }
                    span{
                        display: block;
                        width: 16.5px;
                        height: 4px;
                        border-radius: 2px;
                        opacity: 0.8;
                        background-color: #fff;
                        position: absolute;
                        bottom: 5%;
                        left: 47%;
                    }
                }
                .home_content{
                    padding: 0 16px;
                    .home_title{
                        display: flex;
                        justify-content: space-between;
                        margin-top: 30px;
                        padding: 3px 0;
                        .title{
                            font-size: 18px;
                            font-weight: bolder;
                            color: #09172f;
                            font-family: $font_family;
                        }
                        .title_type{
                            font-size: 13px;
                            color: #9ba6ba;
                            font-family: $font_family;
                            position: relative;
                            span{
                                padding-right: 18px;
                                line-height: 24px;
                            }
                            i{
                                position: absolute;
                                top: 5px;
                                right: 0;
                                display: block;
                                width: 13px;
                                height: 13px;
                                background: url(../img/icon_xia.png) no-repeat;

                                
                            }
                        }

                    }
                    /* 精选书单 */
                    .good_book,.official_activities{
                        ul{
                            display: flex;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            .good_book_detail{
                                width: 164px;
                                margin-top: 15px;
                                a{
                                    width: 100%;
                                    text-decoration: none;
                                    color: #303133;
                                    img{
                                        width: 164px;
                                        height: 92px;
                                    }
                                    .book_name{
                                        width: 100%;
                                        font-family: $font_family;
                                        font-size: 14px;
                                        color: #09172f;
                                    }
                                    .book_date{
                                        font-family: $font_family;
                                        font-size: 12px;
                                        color: #999;
                                    }
                                }
                            }
                        }
                    }
                    /* 发现好书 */
                    .boutique_book,.new_book{
                        margin-top: 10px;
                        ul{
                            display: flex;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            .boutique_book_detail{
                                width: 96px;
                                margin: 15px 0;
                                a{
                                    width: 100%;
                                    text-decoration: none;
                                    color: #303133;
                                    img{
                                        width: 96px;
                                        height: 136px;
                                        border-radius: 4px;
                                    }
                                    .book_name{
                                        width: 100%;
                                        height: 40px;
                                        font-family: $font_family;
                                        font-size: 14px;
                                        color: #09172f;
                                    }
                                }
                            }
                        }
                    }
                    /* 图书推荐榜 */
                    .recommendation_list,.reading_ranking{
                        margin-top: 10px;
                        ul{
                            display: flex;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            .recommendation_list_detail{
                                width: 164px;
                                margin: 8px 0px;
                                a{
                                    width: 100%;
                                    text-decoration: none;
                                    color: #303133;
                                    display: flex;
                                    justify-content: space-between;

                                    .detail_left{
                                        width: 44px;
                                        height: 62px;
                                        position: relative;
                                        img{
                                            width: 100%;
                                            height: 100%;
                                        }
                                        .icon,.num{
                                            width: 16px;
                                            height: 16px;
                                            position: absolute;
                                            left: 0;
                                            top: 0;
                                        }
                                        .num{
                                            display: block;
                                            font-family: $font_family;
                                            font-size: 12px;
                                            color: #fff;
                                            background-color: #696969;
                                            font-weight: bold;
                                            text-align: center;
                                        }
                                    }
                                    .detail_right{
                                        width: 111px;
                                        .b_name{
                                            width: 100%;
                                            height: 40px;
                                            font-family: $font_family;
                                            font-size: 15px;
                                            color: #09172f;
                                        }
                                        .a_name{
                                            margin-top: 3px;
                                            width: 100%;
                                            height: 20px;
                                            line-height: 20px;
                                            font-family: $font_family;
                                            font-size: 12px;
                                            color: #9ba6ba;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .footer{
                margin-top: 45px;
                background-color: rgb(246, 246, 246);
                .friendship{
                    display: flex;
                    padding: 25px 0;
                    margin: 0 25px;
                    border-bottom: 1px solid #E4E8EB;
                    span{
                        font-size: 12px;
                        font-family: $font_family;
                        color: #9ba6ba;
                    }
                    a{
                        text-decoration: none;
                        font-size: 12px;
                        color: #9ba6ba;
                        font-family: $font_family;
                        margin-left: 26px;
                    }
                }
                .foot{
                    padding: 0 25px 10px 25px;
                    margin-top: 25px;
                    h3{
                        font-weight: normal;
                        font-size: 16px;
                        font-family: $font_family;
                        color: #09172f;
                    }
                    .double{
                        font-size: 14px;
                        font-family: $font_family;
                        color: #9ba6ba;
                        margin: 12px 0 30px 0;
                    }
                    .info{
                        display: flex;
                        justify-content: space-around;
                        .code{
                            width: 116px;
                            height: 116px;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                            .code_name{
                                color: #6a7484;
                                font-size: 12px;
                                font-family: $font_family;
                                width: 100%;
                                text-align: center;
                                margin-top: 2px;
                            }
                        }
                        .contactinfo{
                            display: flex;
                            flex-direction: column;
                            justify-content: space-evenly;
                            font-size: 14px;
                            font-family: $font_family;
                            color: #6a7484;
                            p{
                                margin-bottom: 10px;
                            }
                        }
                    }
                    .tip{
                        margin: 47px 0 30px; 
                        font-size: 12px;
                        text-align: center;
                        font-family: $font_family;
                        color: #9ba6ba;
                    }
                }
            }
        }
    }
}